<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<% String path=pageContext.getServletContext().getContextPath(); %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>角色管理</title>
	<link rel="stylesheet" type="text/css" href="<%=path %>/eazyui/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="<%=path %>/eazyui/themes/icon.css">
	<link rel="stylesheet" type="text/css" href="<%=path %>/eazyui/demo/demo.css">
	<script type="text/javascript" src="<%=path %>/eazyui/jquery.min.js"></script>
	<script type="text/javascript" src="<%=path %>/eazyui/jquery.easyui.min.js"></script>
	<style type="text/css">
	a{ color:#999; text-decoration:none;}
		a:hover{ text-decoration:underline;}
	#content{
		width:90%;
		padding:10px;
		margin:0 auto;
	}
	
	
	</style>
	<script type="text/javascript">

	function addRole(){
		
		var role_id = $("#role_id").val();
		var role_name = $("#role_name").val();
		$.ajax({
			url:"<%=path %>/roles/insertRole",
			data:{role_id:role_id,role_name:role_name},
			/*dataType:"json",*/
			success:function(data,textStatus){
				if(textStatus=="success"){
					
					if(data==true){
						alert("添加成功");
						
						$('#dg').datagrid('appendRow',{
							role_id:role_id,
							role_name:role_name,
							
						});
						onLoadSuccess();
						$('#add').window("close");
					}
				}
			},
			error:function(data,textStatus){
				alert("error:"+textStatus);
			},
		})
		
	}
	function deleteRole(role_id,index){
		
		$.ajax({
			url:"<%=path %>/roles/deleteRole",
			data:{role_id:role_id},
			/*dataType:"json",*/
			success:function(data,textStatus){
				if(textStatus=="success"){
					
					if(data==true){
						alert("删除成功");
						
						$('#dg').datagrid('deleteRow',index);
						var rows = $('#dg').datagrid("getRows");
						$("#dg").datagrid("loadData",rows);
					}
				}
			},
			error:function(data,textStatus){
				alert("error:"+textStatus);
			},
		})
	}
	function onLoadSuccess(){
		$("a[name='menubtn']").linkbutton({
			iconCls:''
		});
		$("a[name='editbtn']").linkbutton({
			plain:true,
		    iconCls: 'icon-edit'
		});
		$("a[name='removebtn']").linkbutton({
			plain:true,
		    iconCls: 'icon-remove'
		});
	}
	function formatterBtn(value,row,index){
		var str = '<a href="#" class="easyui-linkbutton" title="菜单权限信息增删改" onclick="showMenu(&quot;'+row.role_id+'&quot;,'+index+');">权限菜单</a> &nbsp;&nbsp;'
		  +'<a href="#" name="editbtn" class="easyui-linkbutton" title="修改角色信息" onclick="editRole(&quot;'+row.role_id+'&quot;,&quot;'+row.role_name+'&quot;,'+index+');">修改</a> &nbsp;&nbsp;'
		  +'<a href="#" name="removebtn" class="easyui-linkbutton" title="删除角色信息" onclick="deleteRole(&quot;'+row.role_id+'&quot;,'+index+');" >删除</a>';
		return str;
			
	}
	function editRole(role_id,role_name,index){
		$("#edit").window("open");
		if(role_id!=""){
			$.get("<%=path %>/roles/getRoleByRoleId",{role_id:role_id},function(data,textStatus){
				

						$("#editrole_id").textbox("setValue",role_id);
						$("#editrole_name").textbox("setValue",role_name);
						$("#editIndex").val(index);
						
					
			})
				
		}
	}
	function saveRole(){
		
		var role_id = $("#editrole_id").textbox("getValue");
		var role_name=$("#editrole_name").textbox("getValue");
		var index =$("#editIndex").val();
		alert(index);
		$.post("<%=path %>/roles/editRole",{role_id:role_id,role_name:role_name},function(data,textStatus){
			
			
			if(data==true){
				alert("修改成功");
				
				$('#edit').window("close");
				$('#dg').datagrid('updateRow',{
					index:index,
					row:{
						role_id:role_id,					
						role_name:role_name,
					}
			});
			onLoadSuccess();
		}
		
	
	})
	}
	function showMenu(role_id,index){
		$("#menu").window("open");
		$("#menuRoleId").val(role_id);
		var menuNodes = $('#tt').tree('getChecked', ['checked','unchecked']);
		//清空所有打钩的menu，设置为为勾选
		for(var i=0; i<menuNodes.length; i++) {
			$('#tt').tree('uncheck', menuNodes[i].target);
		}
		//重新获取所有menu
		var menus = $("#tt").tree("getChecked","unchecked");
		$.ajax({
			url:"<%=path%>/roles/getMenuListByRoleId",
			data:{role_id:role_id},
			success:function(data,textStatus){
				if(textStatus=="success") {
					$.each(data,function(index,result){
						$.each(result.childrenMenuList,function(index,child){
							for(var i=0; i<menus.length; i++) {
								console.log(menus[i]);
								if(menus[i].id==child.menuId) {
									$('#tt').tree('check', menus[i].target);
								}
							}
						})
					})
				}
			},
			error:function(data,textStatus) {
				alert("error: "+textStatus)
			}
		})
	}
	
	function addRoleMenu(){
		var role_id=$("#menuRoleId").val();
		var checkNodes = $('#tt').tree('getChecked', ['checked','indeterminate']);
			alert(checkNodes[0].id);
		var menus="";
		for(var i=0;i<checkNodes.length;i++) {
			menus=menus+checkNodes[i].id+"|";
		}
		alert(menus);
		$.ajax({
			url:"<%=path%>/roles/editRoleMenu",
			data:{role_id:role_id,menus:menus},
			success:function(data,textStatus){
				if(textStatus=="success") {
					alert("权限变更成功");
					$("#menu").window("close");
				}
			},
			error:function(data,textStatus) {
				alert("error: "+textStatus)
			}
		});
	}
	</script>
</head>
<body>


<div id="content">
	<table id="dg" class="easyui-datagrid" style="width: 100%" data-options="onLoadSuccess:onLoadSuccess">
    <thead>
		<tr>
			<th field="role_id" width=5%></th>
			<th field="role_name" width="45%">角色名称</th>
			<th data-options="field:'action',formatter:formatterBtn" width="50%">操作</th>
		</tr>
    </thead>
    <tbody>
    <c:forEach items="${roleList }" var="role">
    	<tr>
			<td>${role.role_id }</td>
			<td>${role.role_name }</td>
		</tr>
	</c:forEach>
		
	</tbody>
</table>
<div style="padding:20px 0;">
		<a href="#" class="easyui-linkbutton" title="添加角色信息"  data-options="iconCls:'icon-add'" onclick="$('#add').window('open')">添加用户信息</a>
	</div>
	<div id="add" class="easyui-window" title="添加角色信息" data-options="modal:true,closed:true,iconCls:'icon-save'" style="width:500px;height:300px;padding:10px;">
		<div style="margin:0 auto;width:60%;">
			<div style="margin:5px auto;">
				<div>角色id:</div>
				<input class="easyui-textbox" id="role_id" style="width:100%;height:25px">
			</div>
			<div style="margin:5px auto;">
				<div>角色名称:</div>
				<input class="easyui-textbox" id="role_name" style="width:100%;height:25px">
			</div>
			<div style="margin-top:10px">
				<a href="#" class="easyui-linkbutton" iconCls="icon-ok" style="width:100%;height:32px" onclick="addRole();">添加</a>
			</div>
		
		</div>
</div>

<div id="edit" class="easyui-window" title="修改角色信息" data-options="modal:true,closed:true,iconCls:'icon-save'" style="width:500px;height:300px;padding:10px;">
		<div style="margin:0 auto;width:60%;">
			
			<div style="margin:5px auto;">
				<input id="editIndex" type="hidden">
				<div>角色id:</div>
				<input id="editrole_id" class="easyui-textbox">
				<div>角色名称:</div>
				<input class="easyui-textbox" id="editrole_name" style="width:100%;height:25px">
			</div>
			
			<div style="margin-top:10px">
				<a href="#" class="easyui-linkbutton" iconCls="icon-ok" style="width:100%;height:32px" onclick="saveRole();">修改</a>
			</div>
		
		</div>
</div>
<div id="menu" class="easyui-window" title="菜单权限" data-options="modal:true,closed:true,iconCls:'icon-save'" style="width:300px;height:450px;padding:10px;">
		<div style="margin:0 auto;width:70%;">
			<div style="margin:5px auto;">
				<input id="menuRoleId" type="hidden">
				<ul id="tt" class="easyui-tree" data-options="animate:true,checkbox:true">
					<c:forEach items="${menuList }" var="menu">
					<li data-options="id:${menu.menuId },state:'closed'">
					<span>${menu.menuName }</span>
					<ul>
						<c:forEach items="${menu.childrenMenuList }" var="children">
							<li data-options="id:${children.menuId }"><span>${children.menuName }</span></li>
						</c:forEach>
					</ul>
					</li>
					</c:forEach>
				</ul>
			</div>
			<div style="margin-top:30px">
				<a href="#" class="easyui-linkbutton" iconCls="icon-ok" style="width:100%;height:32px" onclick="addRoleMenu();">保存</a>
			</div>
		
		</div>
</div>
			
</div>
</body>
</html>